<template>
	<div class="creditPage">
			<div class="creditAllPage">
				<div class="top_fixed">
					<div class="to_top">
							<van-row type="flex" >
								
								  <van-row type="flex" class="titleName">
								    <van-col span="24">
									  <van-icon name="arrow-left"size="20px" @click="backToLastPage" />
								  	  <h5>积分商城</h5>
								    </van-col>
								  </van-row>
							</van-row>
							
							<div class="credit_left">
								<van-icon name="after-sale" />
								<p>20</p>
							</div>
							<div class="credit_more">
								<p class="p1">积分明细&nbsp;&nbsp;&nbsp;&nbsp;|</p>
								<p class="p2">积分规则&nbsp;&nbsp;&nbsp;&nbsp;|</p>
								<p>兑换记录</p>
								
							</div>
					</div>
				</div>
			
			<div class="credit_content">
				<div class="credit_cards">
					<van-row type="flex">
						<van-col span="12"> 
						<img src="../assets/my/jifen.png" >
						<p>积分签到&nbsp;></p>
						</van-col>
						<van-col span="12">
							<img src="../assets/my/优惠券.png" >
							<p>积分抽奖&nbsp;></p>
						</van-col>
					</van-row>
				</div>
			
				<div class="credit_goodslist">
					<van-row type="flex" justify="space-between">
						<van-col span="11">
							<img src="../assets/home/c1.jpg" >
							<p class="title">咖啡烤奶茶</p>
							<p><span>630</span>积分</p>
							<p>剩余122件</p>
						</van-col>
						<van-col span="11">
							<img src="../assets/home/c1.jpg" >
							<p class="title">咖啡烤奶茶</p>
							<p><span>630</span>积分</p>
							<p>剩余122件</p>
						</van-col>
					</van-row>
					
				</div>
			
			</div>
			</div>
			
			
	</div>
</template>

<script>
export default{
	name:'creditPage',
	data(){
		return{
			
		}
	},
	methods:{
		backToLastPage(){
			this.$router.go(-1)
		}
	}
}
</script>

<style scoped>
.creditAllPage{
	position: relative;
	background-color: #f5f8fa;
	height: 1000px;
	
}
.to_top{
	width:375px;
	height:220px;
	background:#E91F3C;
	color:#fff;
	text-align:center;
	position:fixed;
	margin:0 auto;
	z-index: 10;
	top: 0;
	left: 0;
}
.to_top .titleName{
	width:375px;
	height:40px;
	font-size: 16px;
	position:absolute;
	top:0px;
	line-height:0px;
}
.to_top .titleName .van-icon{
	position: absolute;
	width:30px;
	height:30px;
	line-height:30px;
	left:10px;
	top: 5px;
}	
.credit_left{
	display: flex;
	position: absolute;
	top: 70px;
	height:50px ;
	line-height: 50px;
	left: 140px;
	font-size: 40px;
}
.credit_left .van-icon{

	top: 45px;
}
.credit_left p{
	height: 50px;
	margin-left: 5px;

	
}
.credit_more {
	display: flex;
	height: 30px;
	justify-content: space-around;
	margin-top: 170px;
	margin-left: 50px;
	margin-right: 50px;
}

.credit_content{
	position: absolute;
	width: 355px;
	margin: 10px;
	background-color: white;
	height: 80px;
	border-radius: 15px;
	top: 220px;
}
.credit_cards .van-col{
	display: flex;
}
.credit_cards img{
	width: 30px;
	height: 30px;
	margin-left: 20px;
	margin-top: 25px;
}
.credit_cards p{
	margin-left: 10px;
	margin-top: 28px;
	font-size: 18px;
	font-weight: 700;
	
}
.credit_goodslist{
	position: relative;
	width: 355px;
	top: 20px;
	height: 200px;	
	
}
.credit_goodslist img{
	width: 145px;
	height: 145px;
	padding: 5px;
}
.credit_goodslist .title{
	font-size: 19px;
	font-weight: 700;
	margin-top: 5px;
	color: #000000;
}
.credit_goodslist .van-col{
	background-color: white;
	margin:7px;
	border-radius: 10px;
}
.credit_goodslist p{
	text-align: left;
	font-size: 13px;
	color: #969696;
	margin-left: 10px;
	margin-top: -15px;
}.credit_goodslist p span{
	font-size: 18px;
	color: #e91f3c;
}
</style>
